<!DOCTYPE html>
<html>
<head>
    <style>
        #box
        {
            font-size: 20px;
        }
        div.one
        {
            width: 150px;
            height: 150px;
            background-color: aqua;
            position: relative;
            overflow: hidden;
        }
        div.two
        {
            width: 300px;
            height: 75px;
            background-color: aquamarine;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        div.three
        {
            position: absolute;
            width: 400px;
            border: 5px solid black;
            top: 20px;
            left: 200px;
        }
        /* --------------------------------------------- */
        div.size
        {
            width: 200px;
            height: 200px;
            border: 5px solid red;
            position: relative;
            top: 15px;
            overflow: auto;
        }
        #size
        {
            position: absolute;
            width: 400px;
            border: 5px solid black;
            top: 200px;
            left: 250px;
        }
        /* ---------------------------------------- */
        div.zhishidian
        {
            position: absolute;
            width: 300px;
            top: 40px;
            left: 780px;
            border: 5px solid black;
        }
    </style>
    <meta charset="UTF-8" />
    <title>溢出与剪切</title>
</head>
<body>
    <div class="one">
        <div class="two"></div>
    </div>
    <div class="three">
        <p id="box">子盒子使用绝对定位,表示脱离文档流,如果不对主盒子使用相对定位,则overflow: hidden(剪切)不显示</p>
    </div>
    <!-- ------------------------------------------- -->
     <div class="size">
        <p>在时光的幽径上漫步，夕阳如醉，将天空染成一片绚烂的锦缎。
        那余晖洒在古老的城墙上，斑驳的砖石似在低诉往昔的烽火硝烟与盛世繁华。
        城脚下，潺潺的溪流绕过圆润的石子，奏响一曲清脆的乐章，似在与风中的垂柳呢喃细语。
        垂柳依依，嫩绿的丝绦轻舞，宛如羞涩的少女在微风中舒展着婀娜的身姿。
        远处的山峦在暮色中渐次朦胧，与天边的云霞融为一体，仿佛一幅天然的水墨画卷，
        宁静而又深邃，让人不禁沉醉在这如梦如幻的景致里，忘却尘世的纷扰与喧嚣。</p>
     </div>
     <div id="size">
        <p>文字溢出时,visible(默认)表示显示,hidden剪切div出去的文本,
            scroll(滚动):可以设置行(overflow-x)还是列(overflow-y)
            auto(全能):如果内容区域大小能装下，正常显示,如果装不下,同时显示并启动滚动条功能</p>
     </div>
     <!-- -------------------------------------- -->
      <div class="zhishidian">
        <p>溢出与剪切的属性为:overflow;<br>
            属性值有:<br>1.visible:默认值,显示<br>2.hidder(剪切):将溢出的部分文字或者图片切掉<br>
            3.scroll(滚动):将多余部分折叠,并且形成滚动条,滑动可观看<br>
            4.auto(全能):内容区域可以显示完,则正常显示;显示不完,则变成滚动.
        </p>
      </div>
</body>
</html>